<template>
  <div class="user">
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      size="small"
    >
      <el-form-item label="用户名称">
        <el-input
          v-model="formInline.userName"
          placeholder="用户名称"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input
          v-model="formInline.phone"
          placeholder="手机号"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="userName" label="用户名称" width="180px">
      </el-table-column>
      <el-table-column prop="realName" label="真实姓名" width="180px">
      </el-table-column>
      <el-table-column prop="phone" label="手机号" width="120px">
      </el-table-column>
      <el-table-column prop="powerId" label="用户权限">
        <template slot-scope="scope">
          <span>{{ power(scope.row.powerId) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="认证状态">
        <template slot-scope="scope">
          <span>{{ scope.row.status == 2 ? "已认证" : "未认证" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="userAvatar" label="用户头像">
        <template slot-scope="scope">
          <el-image
            :src="userAvatar(scope.row.userAvatar)"
            :preview-src-list="[userAvatar(scope.row.userAvatar)]"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="attestationType" label="认证类型">
        <template slot-scope="scope">
          <span>{{
            scope.row.attestationType === "0"
              ? "个人"
              : scope.row.attestationType === "1"
              ? "公司"
              : "未认证"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="publisherIdentity" label="作者数字身份ID">
      </el-table-column>
      <el-table-column prop="description" label="简介描述" width="180px">
        <template slot-scope="scope">
          <span>{{ scope.row.description }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="registerTime" label="注册时间" width="180px">
      </el-table-column>
      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button type="danger" @click="activeUser(scope.row.id,false)" size="mini" v-if="scope.row.isActivated"
            >禁用</el-button
          >
          <el-button type="primary" @click="activeUser(scope.row.id,true)" size="mini" v-else
            >启用</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="block pageCont">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSizes"
        layout="total, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import baseConfig from "@/utils/config";
import { UserInfoList, UserInfoDel,UserInfoActivated } from "@/api/user";
export default {
  data() {
    return {
      tableData: [],
      formInline: {},
      currentPage: 1,
      total: 0,
      pageSizes: 15,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    userAvatar(url) {
      return baseConfig.dev + url;
    },
    power(power) {
      if (power == 1) {
        return "普通用户";
      } else if (power == 2) {
        return "管理员";
      }
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },
    getList() {
      UserInfoList({ page: this.currentPage, ...this.formInline }).then(
        (res) => {
          this.tableData = res.data.list;
          this.total = res.data.total;
        }
      );
    },
    activeUser(id, activated) {
      UserInfoActivated({ id: id, activated: activated }).then((res) => {
        if (res.code == 0) {
          this.$message.success("操作成功");
          this.getList();
        } else {
          this.$message.error(res.data);
        }
      });
    },
    del(id) {
      UserInfoDel({ id: id }).then((res) => {
        if (res.code == 0) {
          this.$message.success("删除成功");
          this.getList();
        } else {
          this.$message.error(res.data);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.user {
  ::v-deep {
    .el-image {
      width: 50px !important;
      height: 50px !important;
      .el-image__error {
        font-size: 12px;
      }
    }
  }
}
</style>